<!--
 * @Description: 商品列表模板配置
 
 * @Date: 2021-09-08 19:37:59
 
 * @LastEditTime: 2021-09-17 14:24:01
-->
<template>
  <div class="listTpl m20 p20 bg-white">
    <div
      class="mb20 f14 f-bold"
      style="color:#595961"
    >列表设置</div>
    <div
      class="p10 r10"
      style="background:#f2f2f6"
    >
      <div class="listTpl-body">

        <!-- 展示图 -->
        <img
          class="listTpl-body-left"
          :src="getImage()"
        >

        <!-- 配置项 -->
        <div class="listTpl-body-right">
          <el-form label-width="80px">
            <el-form-item label="默认样式">
              <el-radio
                v-model="listTpl.model"
                label="one"
              >单列</el-radio>
              <el-radio
                v-model="listTpl.model"
                label="two"
              >双列</el-radio>
            </el-form-item>
            <el-form-item label="购物车">
              <el-radio
                v-model="listTpl.addIcon"
                label="cart"
              >样式一</el-radio>
              <el-radio
                v-model="listTpl.addIcon"
                label="add"
              >样式二</el-radio>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  name: "listTpl",

  data() {
    return {
        project:{
    "_id": "62690740d9f4912ae0f7d588",
    "pages": [
        {
            "id": "000000",
            "name": "首页",
            "home": true,
            "componentList": [
                {
                    "component": "McSwiper",
                    "name": "广告轮播",
                    "icon": "ivu-icon-md-swap",
                    "list": [
                        {
                            "id": "0001",
                            "image": "https://oss.i-town.cn/itown/202311221058175012990.jpg"
                        },
                        {
                            "id": "0002",
                            "image": "https://oss.i-town.cn/itown/202311221058336102360.jpg"
                        },
                        {
                            "id": "0003",
                            "image": "https://oss.i-town.cn/itown/202311221058529104360.jpg"
                        }
                    ],
                    "attrs": {
                        "model": "basis",
                        "autoplay": true,
                        "loop": true
                    },
                    "styles": {
                        "pagePadding": "0",
                        "negativeMarginBottom": "0"
                    },
                    "id": "1651050315JEeHVc"
                }
            ]
        }
    ],
    "name": "售票小程序",
    "cover": "https://api.boss.i-town.cn/Upload/img/1639553326077.jpeg",
    "config": {
        "navigation": {
            "label": "导航",
            "styles": {
                "background": "#fff"
            },
            "list": [
                {
                    "id": "00001",
                    "icon": "icon-shop",
                    "text": "首页",
                    "jump": {
                        "type": "custom",
                        "id": "000000"
                    }
                },
                {
                    "id": "00003",
                    "icon": "icon-sort",
                    "text": "分类",
                    "jump": {
                        "type": "fixed",
                        "id": "category"
                    }
                },
                {
                    "id": "00004",
                    "icon": "icon-cart",
                    "text": "购物车",
                    "jump": {
                        "type": "fixed",
                        "id": "car"
                    }
                },
                {
                    "id": "00005",
                    "icon": "icon-my",
                    "text": "我的",
                    "jump": {
                        "type": "fixed",
                        "id": "my"
                    }
                }
            ]
        },
        "goodsGroups": [
            {
                "name": "新品上架",
                "type": "0001",
                "level": "1",
                "child": [ ]
            },
            {
                "name": "热销排行",
                "type": "0002",
                "level": "1",
                "child": [ ]
            }
        ],
        "listTpl": {
            "model": "one",
            "addIcon": "cart"
        },
        "categoryTpl": {
            "advertising": false
        },
        "hotList": [ ],
        "backgroundColor": "#FFFFFF"
    },
    "type": "mall",
    "industry": "hotel",
    "userId": "6269070fd9f4912ae0f7d583",
    "logo": "https://api.boss.i-town.cn/Upload/img/1638500579691.png",
    "id": "62690740d9f4912ae0f7d588"
},

    };
  },
  computed: {
    

    listTpl() {
      return this.project.config.listTpl;
    },
  },

  methods: {
    getImage() {
      let imgUrl = `pc-list-${this.listTpl.model}-${this.listTpl.addIcon}.jpg`;
      return require("@/assets/image/" + imgUrl);
    },
  },
};
</script>

<style lang="scss" scoped>
.listTpl {
  .listTpl-body {
    display: flex;
    padding: 10px 30px;

    .listTpl-body-left {
      width: 375px;
      margin-right: 30px;
    }

    .listTpl-body-right {
      padding-top: 10px;
    }
  }
}
</style>